<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // var url = "http://laboratory.com/api/showRoomApi/getInfo?laboratory_id=1";
        // 显示标题，图例和空的坐标轴
        // myChart.setOption({
        //     title: {
        //         text: '异步数据加载示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['销量']
        //     },
        //     xAxis: {
        //         data: []
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: []
        //     }]
        // });

        // 异步加载数据
        // $.get(url).done(function (data) {
        //     // 填入数据
        //     myChart.setOption({
        //         xAxis: {
        //             data: data.categories
        //         },
        //         series: [{
        //             // 根据名字对应到相应的系列
        //             name: '销量',
        //             data: data.data
        //         }]
        //     });
        // });

        option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        myChart.setOption(option);

        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            setTimeout(function () {
                cb({
                    date: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    name: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
                    data: [
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000],
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000],
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000],
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000],
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000],
                        [Math.random(0, 1) * 5000, Math.random(0, 1) * 7000, Math.random(0, 1) * 10000, Math.random(0, 1) * 8000, Math.random(0, 1) * 9000, Math.random(0, 1) * 11000, Math.random(0, 1) * 6000]
                    ]
                });
            }, 3000);
        }

        setInterval(function () {
            // myChart.showLoading();
            fetchData(function (data) {
                // console.log(data.data[0]);
                // return false;
                // myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: data.name[0],
                        type: 'line',
                        stack: '总量',
                        data: data.data[0]
                    }, {
                        // 根据名字对应到相应的系列
                        name: data.name[1],
                        type: 'line',
                        stack: '总量',
                        data: data.data[1]
                    }, {
                        // 根据名字对应到相应的系列
                        name: data.name[2],
                        type: 'line',
                        stack: '总量',
                        data: data.data[2]
                    }, {
                        // 根据名字对应到相应的系列
                        name: data.name[3],
                        type: 'line',
                        stack: '总量',
                        data: data.data[3]
                    }, {
                        // 根据名字对应到相应的系列
                        name: data.name[4],
                        type: 'line',
                        stack: '总量',
                        data: data.data[4]
                    }]
                });
            });
        }, 3000)
    </script>
</body>

</html>